<template>
    <div
        :class="classs"
        :style="{
            ...styles,
            opacity: conf.opacity,
            transform: `translate(${conf.x}px,${conf.y}px) scale(${(conf.scale ? conf.scale : conf.scaleX) || 1},${
                (conf.scale ? conf.scale : conf.scaleY) || 1
            }) rotateZ(${(conf.rotate ? conf.rotate : conf.rotateZ) || 0}deg)`
        }"
    >
        <slot :="conf"></slot>
    </div>
</template>

<script lang="ts" setup>
import CTween from '~/store/CTween'
import { onMounted, onUnmounted, reactive } from 'vue'
import { TimeBean, TimeRender } from 'tools-time'
const props = defineProps({
    /**
     * 开启列，一般用于和col控制
     */
    name: { default: '' },
    /**
     * 样式
     */
    styles: { default: {} as any },
    /**
     * 顶部留空距离,默认是customBarHeight
     */
    classs: { default: '' },
    /**
     * 底部留空距离
     */
    bottom: { default: 0 },
    /**
     * 默认数据
     */
    data: { default: {} }
})

const conf = reactive({
    name: props.name,
    id: '',
    x: 0,
    y: 0,
    opacity: 1,
    bean: {} as TimeBean,
    scale: undefined,
    scaleX: undefined,
    scaleY: undefined,
    rotate: undefined,
    rotateX: undefined,
    rotateY: undefined,
    rotateZ: undefined,
    ...props.data
})
conf.bean = new TimeBean({
    name: props.name,
    target: conf
})

const uuid = TimeRender.add(conf.bean)

onMounted(() => {
    const info = {
        target: conf,
        name: props.name,
        to: (options: any) => {
            conf.bean.setOptionSource(conf)
            conf.bean.setOption(options)
            conf.bean.start()
        }
    }
    CTween.sprite.add(info)
})

onUnmounted(() => {
    TimeRender.remove(uuid)
    CTween.sprite.remove(props.name)
    conf.bean = null as any
})
</script>
